<template>
  <view class="product-search">
    <view class="content">
      <view class="input" v-if="isInputShow">
        <uni-search-bar
            class="search-bar"
            :radius="6"
            :bgColor="config.backgroundColor"
            :placeholder="initText"
            :value="value"
            @confirm="onSearch"
            @clear="onClear"
            @cancel="onCancel"
            @input="onInput"
        >
          <uni-icons slot="clearIcon" type="clear" color="#999999"></uni-icons>
        </uni-search-bar>
      </view>
      <view class="button" @click="goToSearchPage" v-else >
        <image class="glass" src="https://littleshop.oss-cn-beijing.aliyuncs.com/images/mini/icons/glass.png"></image>
        <text class="placeholder">{{ initText }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "ProductSearchInputCom",
  props: {
    isInputShow: {
      type: Boolean,
      default: false
    },
    initText: {
      type: String,
      default: '百货'
    },
    value: {
      type: String
    },
    config: {
      type: Object,
      default: () => ({
        height: 36,
        backgroundColor: '#ffffff',
        icon: '/static/images/icons/glass.png',
        textColor: '#454545',
        border: '1px #c9c9c9 solid'
      })
    }
  },
  methods: {
    goToSearchPage() {
      uni.navigateTo({url: '/packs/one/pages/product/search'})
    },
    onSearch() {
      this.$emit('search', this.value)
    },
    onClear() {
      this.$emit('clear', this.value)
    },
    onCancel() {
      this.$emit('cancel', this.value)
    },
    onInput(val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.product-search {
  .content {
    .button {
      // width: 100%;
      height: 60rpx;
      line-height: 60rpx;
      border: 1px #555555 solid;
      border-radius: 40rpx;
      display: flex;
      justify-content: flex-start;
      .glass {
        width: 32rpx;
        height: 32rpx;
        margin-top: 16rpx;
        margin-left: 16rpx;
        margin-right: 16rpx;
      }
      .placeholder {
        margin-top: 2rpx;
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}
</style>
